.globeContainer {
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    .globeMain {
        width: 300px;
        height: 400px;
        position: relative;
        margin-top: 99px;
        .globe {
            width: 180px;
            height: 180px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -100px;
            border-radius: 50%;
            animation: animation 20s infinite linear;
            transform-style:preserve-3d;
            .globeItem {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                border: 1px solid #fff;
                position: absolute;
                top: 0;
                left: 0;
                transform-style: preserve-3d;
            }
        }
        .holder {
            width: 250px;
            height: 290px;
            position: absolute;
            top: 46px;
            left: -7px;
            .chassis {
                width: 50%;
                height: 15px;
                background-color: #e2e2e2;
                position: absolute;
                left: 50%;
                margin-left: -25%;
                bottom: 3px;
                z-index: 1;
                .chassisInnerLayer {
                    width: 50px;
                    height: 13px;
                    background-color: #e2e2e2;
                    position: absolute;
                    left: 50%;
                    bottom: 14px;
                    margin-left: -25px;
                    z-index: 2;
                }
                .chassisInnerLayer:after {
                    display: block;
                    width: 100%;
                    height: 5px;
                    border-radius:50%;
                    position: absolute;
                    top:-2.5px;
                    content: "";
                    background: linear-gradient(#9e9898, #e2e2e2);
                }
                .chassisInnerLayer:before {
                    display: block;
                    width: 100%;
                    height: 5px;
                    border-radius:50%;
                    position: absolute;
                    bottom:-2.5px;
                    content: "";
                    background: #e2e2e2;
                }
            }
            .chassis:after {
                display: block;
                width: 100%;
                height: 5px;
                border-radius:50%;
                position: absolute;
                top:-2.5px;
                content: "";
                background: linear-gradient(#696666, #e2e2e2);
            }
            .chassis:before {
                display: block;
                width: 100%;
                height: 5px;
                border-radius:50%;
                position: absolute;
                bottom:-2.5px;
                content: "";
                background: #e2e2e2;
            }
            .axis {
                width: 2px;
                height: 250px;
                background-color: #fff;
                position: absolute;
                left: 146px;
                bottom: 25px;
                z-index: 3;
                transform:rotateZ(10deg);
            }
            .outline {
                width: 222px;
                height: 235px;
                border-radius: 50%;
                border-right: 3px solid #fff;
                position: absolute;
                left: 37px;
                bottom: 35px;
                transform:rotateZ(10deg);
            }
        }
    }
}

@keyframes animation {
    0% {transform:rotate(10deg) rotateX(-20deg) rotateY(0deg)}
    100% {transform:rotate(10deg) rotateX(-20deg) rotateY(360deg)}
}




